<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="所属服务商" prop="agentName">
        <el-select
          v-model="queryParams.agentId"
          placeholder="选择服务商账号"
          filterable
          style="width: 190px"
          remote
        >
          <el-option
            v-for="item in agentOptions"
            :key="item.id"
            :label="item.agentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="是否包含下级代理商"
        prop="agentName"
        v-if="!onlyShowSn"
      >
        <el-radio-group v-model="queryParams.isJunior">
          <el-radio value="1" size="large">是</el-radio>
          <el-radio value="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="SN号" prop="sn" v-if="!onlyShowSn">
        <el-input
          v-model="queryParams.sn"
          placeholder="请输入SN号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="MAC" prop="sn" v-if="!onlyShowSn">
        <el-input
          v-model="queryParams.mac"
          placeholder="请输入SN号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="所属厂商" prop="factoryId" v-if="!onlyShowSn">
        <el-select
          clearable
          placeholder="请选择所属厂商"
          v-model="queryParams.factoryId"
          style="width: 190px"
        >
          <el-option
            v-for="item in factoryOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属类型" prop="typeId" v-if="!onlyShowSn">
        <el-select
          clearable
          placeholder="请选择所属类型"
          v-model="queryParams.typeId"
          style="width: 190px"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属型号" prop="modelId" v-if="!onlyShowSn">
        <el-select
          clearable
          placeholder="请选择所属型号"
          v-model="queryParams.modelId"
          style="width: 190px"
        >
          <el-option
            v-for="item in modelOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="绑定状态" prop="bindStatus" v-if="!onlyShowSn">
        <el-select
          clearable
          v-model="queryParams.bindStatus"
          placeholder="请选择绑定状态"
          style="width: 160px"
        >
          <el-option label="已绑定" value="1"></el-option>
          <el-option label="未绑定" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="终端状态" prop="deviceStatus" v-if="!onlyShowSn">
        <el-select
          clearable
          v-model="queryParams.deviceStatus"
          placeholder="请选择终端状态"
          style="width: 160px"
        >
          <el-option label="正常" value="0"></el-option>
          <el-option label="异常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设备在线状态" prop="onlineStatus" v-if="!onlyShowSn">
        <el-select
          clearable
          v-model="queryParams.onlineStatus"
          placeholder="请选择在线状态"
          style="width: 160px"
        >
          <el-option label="在线" value="1"></el-option>
          <el-option label="离线" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="入库时间" v-if="!onlyShowSn">
        <el-date-picker
          v-model="intervalTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button @click="openSearch">筛选</el-button>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Download" @click="handleExport">导出</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['pcdn:info:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['pcdn:info:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['pcdn:info:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['pcdn:info:export']"
        >导出</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="primary"
          @click="openDialog('form', '终端入库', 'infoRef')"
          >终端入库</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <!-- <el-button color="#626aef" :style="{color: '#fff'}" @click="addBatch">批量入库</el-button> -->
        <el-button
          color="#626aef"
          :style="{ color: '#fff' }"
          @click="openDialog('form02', '批量入库', 'infoRef02')"
          >批量入库</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <!-- <el-button color="#00b084" @click="handleQuery">服务商发货</el-button> -->
        <el-button
          color="#00b084"
          @click="openDialog('form03', '服务商发货', 'infoRef03')"
          >服务商发货</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          color="#67c23a"
          :style="{ color: '#fff' }"
          @click="agentServer('form04')"
          >服务商发货(多选)</el-button
        >
        <!-- <el-button color="#67c23a" :style="{color: '#fff'}" @click="openDialog('form04', '服务商批量发货')">服务商批量发货(多选)</el-button> -->
      </el-col>
      <el-col :span="1.5">
        <!-- <el-button color="#00B084" @click="handleQuery">服务商批量调拨</el-button> -->
        <el-button
          color="#00B084"
          @click="openDialog('form05', '服务商批量调拨', 'infoRef05')"
          >服务商批量调拨</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          color="#67c23a"
          :style="{ color: '#fff' }"
          @click="agentServer('form06')"
          >服务商批量调拨(多选)</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          color="#00B084"
          @click="openDialog('form07', '机具回收', 'infoRef07')"
          >机具回收</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          color="#67c23a"
          :style="{ color: '#fff' }"
          @click="agentServer('form08')"
          >机具回收(多选)</el-button
        >
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button color="#f56c6c" :style="{color: '#fff'}" @click="openDialog('form09', '批量删除', 'infoRef09')">批量删除</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button
          color="#f56c6c"
          :style="{ color: '#fff' }"
          @click="agentServer('form10')"
          >批量删除(多选)</el-button
        >
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['pcdn:factory:remove']"
          >批量删除</el-button
        >
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="getList"
        :columns="columns"
      ></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="infoList"
      @selection-change="handleSelectionChange"
      @getSelectionRows="getSelectionRows"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="服务商"
        align="center"
        prop="agentId"
        v-if="columns[3].visible"
      />
      <el-table-column
        label="SN号"
        align="center"
        prop="sn"
        v-if="columns[0].visible"
      />
      <el-table-column
        label="MAC"
        align="center"
        prop="mac"
        width="200"
        v-if="columns[0].visible"
      />
      <el-table-column
        label="厂商"
        align="center"
        prop="factoryId"
        v-if="columns[1].visible"
      />
      <el-table-column
        label="设备类型"
        align="center"
        prop="typeId"
        v-if="columns[8].visible"
      />
      <el-table-column
        label="型号"
        align="center"
        prop="modelId"
        v-if="columns[2].visible"
      />
      <el-table-column
        label="设备状态"
        align="center"
        prop="bindStatus"
        v-if="columns[4].visible"
      >
        <template #default="scope">
          <el-tag
            :type="
              scope.row.onlineStatus === 1
                ? 'success'
                : scope.row.onlineStatus === 0
                ? 'danger'
                : 'info'
            "
          >
            {{
              scope.row.onlineStatus === 1
                ? "在线"
                : scope.row.onlineStatus === 0
                ? "离线"
                : "未知"
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="绑定状态"
        align="center"
        prop="bindStatus"
        v-if="columns[4].visible"
      >
        <template #default="scope">
          <dict-tag :options="bind_status" :value="scope.row.bindStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="终端状态"
        align="center"
        prop="deviceStatus"
        v-if="columns[5].visible"
      >
        <template #default="scope">
          <dict-tag
            :options="sys_normal_disable"
            :value="scope.row.deviceStatus"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="库存状态"
        align="center"
        prop="stockStatus"
        v-if="columns[6].visible"
      >
        <template #default="scope">
          <dict-tag :options="stock_status" :value="scope.row.stockStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="绑定日期"
        align="center"
        prop="bindTime"
        width="180"
        v-if="columns[7].visible"
      >
        <template #default="scope">
          <span>{{ scope.row.bindTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="入库时间"
        align="center"
        prop="updateTime"
        width="180"
        v-if="columns[7].visible"
      >
        <template #default="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="180"
        class-name="small-padding fixed-width"
        fixed="right"
      >
        <template #default="scope">
          <el-button link type="primary" @click="handleDetail(scope.row)"
            >详情</el-button
          >
          <el-button
            link
            type="primary"
            icon="Edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['pcdn:info:edit']"
            >修改</el-button
          >
          <el-button
            link
            type="primary"
            icon="Delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['pcdn:info:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改设备信息对话框 -->
    <el-dialog
      ref="dialogContent"
      :title="title"
      v-model="open"
      width="500px"
      append-to-body
      :destroy-on-close="true"
      @close="handleClose"
    >
      <el-form
        v-if="currentFormKey === 'form'"
        ref="infoRef"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="MAC" prop="sn">
          <el-input v-model="form.mac" placeholder="请输入MAC号" />
        </el-form-item>
        <el-form-item label="机具类型" prop="typeId">
          <el-select v-model="form.typeId" placeholder="选择机具类型">
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属厂商" prop="factoryId">
          <el-select v-model="form.factoryId" placeholder="选择所属厂商">
            <el-option
              v-for="item in factoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属型号" prop="modelId">
          <el-select v-model="form.modelId" placeholder="选择所属型号">
            <el-option
              v-for="item in modelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef02"
        v-if="currentFormKey === 'form02'"
        :model="form02"
        :rules="rules02"
        label-width="85px"
      >
        <el-form-item label="机具类型" prop="typeId">
          <el-select v-model="form02.typeId" placeholder="选择机具类型">
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属厂商" prop="factoryId">
          <el-select v-model="form02.factoryId" placeholder="选择所属厂商">
            <el-option
              v-for="item in factoryOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属型号" prop="modelId">
          <el-select v-model="form02.modelId" placeholder="选择所属型号">
            <el-option
              v-for="item in modelOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="file">
          <el-upload
            ref="uploadRef"
            action="#"
            :limit="1"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :on-change="handleChange"
            :on-remove="handleRemove"
          >
            <template #trigger>
              <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">只支持xls或xlsx格式文件.</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            text="plain"
            :link="VITE_APP_BASE_APIL+'/files/snfile-template.xlsx'"
            @click="downloadTemplate"
            ><el-icon><Download /></el-icon>下载模板</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef03"
        v-if="currentFormKey === 'form03'"
        :model="form03"
        :rules="rules03"
        label-width="85px"
      >
        <el-form-item label="服务商账号" prop="agentId">
          <el-select
            v-model="form03.agentId"
            placeholder="选择服务商账号"
            filterable
            remote
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="file">
          <el-upload
            ref="uploadRef03"
            action="#"
            :limit="1"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :on-change="handleChange2"
            :on-remove="handleRemove3"
          >
            <template #trigger>
              <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">只支持xls或xlsx格式文件.</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            text="plain"
           :link="VITE_APP_BASE_APIL+'/files/snfile-template.xlsx'"
            @click="downloadTemplate"
            ><el-icon><Download /></el-icon>下载模板</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef04"
        v-if="currentFormKey === 'form04'"
        :model="form04"
        :rules="rules04"
      >
        <el-form-item label="MAC" prop="sns">
          <el-input v-model="form04.mac" placeholder="请输入mac号" />
        </el-form-item>
        <el-form-item label="服务商账号" prop="agentIds">
          <el-select
            v-model="form04.agentIds"
            placeholder="选择服务商账号"
            filterable
            remote
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef05"
        v-if="currentFormKey === 'form05'"
        :model="form05"
        :rules="rules05"
        label-width="85px"
      >
        <el-form-item label="原服务商" prop="srcAgentId">
          <el-select
            v-model="form05.srcAgentId"
            filterable
            remote
            placeholder="选择服务商账号"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="现服务商" prop="desAgentId">
          <el-select
            v-model="form05.desAgentId"
            filterable
            remote
            placeholder="选择服务商账号"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" prop="file">
          <el-upload
            ref="uploadRef05"
            action="#"
            :limit="1"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :on-change="handleChange5"
            :on-remove="handleRemove5"
          >
            <template #trigger>
              <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">只支持xls或xlsx格式文件.</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            text="plain"
            :link="VITE_APP_BASE_APIL+'/files/snfile-template.xlsx'"
            @click="downloadTemplate"
            ><el-icon><Download /></el-icon>下载模板</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef06"
        v-if="currentFormKey === 'form06'"
        :model="form06"
      >
        <el-form-item label="MAC" prop="sns">
          <el-input v-model="form06.mac" placeholder="请输入MAC号" />
        </el-form-item>
        <el-form-item label="原服务商" prop="srcAgentId">
          <el-select
            v-model="form06.srcAgentId"
            filterable
            remote
            placeholder="选择服务商账号"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="现服务商" prop="desAgentId">
          <el-select
            v-model="form06.desAgentId"
            filterable
            remote
            placeholder="选择服务商账号"
          >
            <el-option
              v-for="item in agentOptions"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef07"
        v-if="currentFormKey === 'form07'"
        :model="form07"
        label-width="68px"
      >
        <el-form-item label="上传文件" prop="file">
          <el-upload
            ref="uploadRef07"
            action="#"
            :limit="1"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :on-change="handleChange7"
            :on-remove="handleRemove7"
          >
            <template #trigger>
              <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">只支持xls或xlsx格式文件.</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            text="plain"
            :link="VITE_APP_BASE_APIL+'/files/snfile-template.xlsx'"
            @click="downloadTemplate"
            ><el-icon><Download /></el-icon>下载模板</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef08"
        v-if="currentFormKey === 'form08'"
        :model="form08"
      >
        <el-form-item label="MAC" prop="sns">
          <el-input v-model="form08.mac" placeholder="请输入MAC号" />
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef09"
        v-if="currentFormKey === 'form09'"
        :model="form09"
        label-width="68px"
      >
        <el-form-item label="上传文件" prop="file">
          <el-upload
            ref="uploadRef09"
            action="#"
            :limit="1"
            accept=".xls,.xlsx"
            :auto-upload="false"
            :on-change="handleChange9"
            :on-remove="handleRemove9"
          >
            <template #trigger>
              <el-button type="primary">上传文件</el-button>
            </template>
            <template #tip>
              <div class="el-upload__tip">只支持xls或xlsx格式文件.</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            text="plain"
           :link="VITE_APP_BASE_APIL+'/files/snfile-template.xlsx'"
            @click="downloadTemplate"
            ><el-icon><Download /></el-icon>下载模板</el-button
          >
        </el-form-item>
      </el-form>

      <el-form
        ref="infoRef10"
        v-if="currentFormKey === 'form10'"
        :model="form10"
      >
        <el-form-item label="MAC" prop="sns">
          <el-input v-model="form10.mac" placeholder="请输入MAC号" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(currentFormKey)"
            >确 定</el-button
          >
          <el-button @click="resetForm(currentFormRef)">重 置</el-button>
          <el-button @click="cancel(currentFormRef)">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 设备详情弹窗 -->
    <el-dialog
      title="设备详情"
      v-model="detailOpen"
      width="1000px"
      append-to-body
      :destroy-on-close="true"
    >
      <el-descriptions :column="2" border>
        <!-- 基本信息 -->
        <el-descriptions-item label="主键">{{
          detailInfo.id || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="CDN名称">{{
          detailInfo.cdnName || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="MAC地址">{{
          detailInfo.mac || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="SN号">{{
          detailInfo.sn || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="号段">{{
          detailInfo.serialNumber || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="内网IP地址">{{
          detailInfo.inIp || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="外网IP地址">{{
          detailInfo.outIp || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="网络类型">{{
          detailInfo.natType || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          detailInfo.phone || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">
          <span
            v-if="
              detailInfo.nodeInfo &&
              (detailInfo.nodeInfo.provinceName ||
                detailInfo.nodeInfo.cityName ||
                detailInfo.nodeInfo.regionName ||
                detailInfo.nodeInfo.addressDetail)
            "
          >
            {{
              [
                detailInfo.nodeInfo.provinceName,
                detailInfo.nodeInfo.cityName,
                detailInfo.nodeInfo.regionName,
                detailInfo.nodeInfo.addressDetail,
              ]
                .filter(Boolean)
                .join("-")
            }}
          </span>
          <span v-else-if="detailInfo.address">{{ detailInfo.address }}</span>
          <span v-else>-</span>
        </el-descriptions-item>

        <!-- 关联信息 -->
        <el-descriptions-item label="所属服务商">{{
          detailInfo.agentName || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="所属厂商">{{
          getFactoryName(detailInfo.factoryId)
        }}</el-descriptions-item>
        <el-descriptions-item label="所属型号">{{
          getModelName(detailInfo.modelId)
        }}</el-descriptions-item>
        <el-descriptions-item label="所属类型">{{
          getTypeName(detailInfo.typeId)
        }}</el-descriptions-item>

        <el-descriptions-item label="云商应用ID">{{
          detailInfo.providerId || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{
          detailInfo.remark || "暂无备注"
        }}</el-descriptions-item>

        <!-- 状态信息 -->
        <el-descriptions-item label="绑定状态">
          <el-tag :type="detailInfo.bindStatus === 1 ? 'success' : 'danger'">
            {{ detailInfo.bindStatus === 1 ? "已绑定" : "未绑定" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="绑定时间">{{
          detailInfo.bindTime ? parseTime(detailInfo.bindTime) : "未绑定"
        }}</el-descriptions-item>
        <el-descriptions-item label="CDN在线状态">
          <el-tag :type="detailInfo.cdnOnline === 1 ? 'success' : 'danger'">
            {{ detailInfo.cdnOnline === 1 ? "在线" : "离线" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="终端状态">
          <el-tag :type="detailInfo.deviceStatus === 1 ? 'success' : 'danger'">
            {{ detailInfo.deviceStatus === 1 ? "正常" : "异常" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="在线状态">
          <el-tag :type="detailInfo.onlineStatus === 1 ? 'success' : 'danger'">
            {{ detailInfo.onlineStatus === 1 ? "在线" : "离线" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="库存状态">
          <el-tag :type="detailInfo.stockStatus === 1 ? 'success' : 'danger'">
            {{ detailInfo.stockStatus === 1 ? "在库" : "出库" }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否开启IPv6">
          <el-tag
            :type="
              detailInfo.ipv6Start === 1
                ? 'success'
                : detailInfo.ipv6Start === 0
                ? 'danger'
                : 'info'
            "
          >
            {{
              detailInfo.ipv6Start === 1
                ? "开启"
                : detailInfo.ipv6Start === 0
                ? "关闭"
                : "未知"
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="是否开启UPNP">
          <el-tag
            :type="
              detailInfo.upnpStart === 1
                ? 'success'
                : detailInfo.upnpStart === 0
                ? 'danger'
                : 'info'
            "
          >
            {{
              detailInfo.upnpStart === 1
                ? "开启"
                : detailInfo.upnpStart === 0
                ? "关闭"
                : "未知"
            }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{
          detailInfo.nodeInfo.customerName || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="客户电话">{{
          detailInfo.nodeInfo.customerPhone || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="拨号方式">
          <el-tag
            :type="getDialingMethodType(detailInfo.nodeInfo.dialingMethod)"
          >
            {{ getDialingMethodText(detailInfo.nodeInfo.dialingMethod) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="运营商">
          <el-tag :type="getOperatorType(detailInfo.nodeInfo.operator)">
            {{ getOperatorText(detailInfo.nodeInfo.operator) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="安装图片">
          <el-image
            v-if="
              detailInfo.nodeInfo.installationImage &&
              getImageUrls(detailInfo.nodeInfo.installationImage).length > 0
            "
            :src="getFirstImageUrl(detailInfo.nodeInfo.installationImage)"
            style="width: 100px; height: 100px"
            :preview-src-list="
              getImageUrls(detailInfo.nodeInfo.installationImage)
            "
            fit="cover"
            :preview-teleported="true"
          />
          <span v-else>暂无图片</span>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{
          detailInfo.nodeInfo.remark || "暂无备注"
        }}</el-descriptions-item>
      </el-descriptions>

      <!-- 节点信息详情 -->

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 参数详情弹窗 -->
    <el-dialog
      title="扩展参数详情"
      v-model="paramsOpen"
      width="600px"
      append-to-body
      :destroy-on-close="true"
    >
      <pre
        style="
          background: #f5f5f5;
          padding: 15px;
          border-radius: 4px;
          max-height: 400px;
          overflow-y: auto;
        "
        >{{ JSON.stringify(detailInfo.params, null, 2) }}</pre
      >

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="paramsOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Info">
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  listFactory,
  listAgent,
  listModel,
  listType,
  batchAdd,
  batchDeliver,
  batchDeliverys,
  allotAgent,
  batchAllotAgent,
  recover,
  batchRecover,
  exportInfo,
} from "@/api/pcdn/info";

import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import { formContextKey } from "element-plus";
import { ref, watch, getCurrentInstance, reactive, toRefs } from "vue";
import { parseTime } from "@/utils/ruoyi";

const { proxy } = getCurrentInstance();
const { bind_status, sys_normal_disable, stock_status } = proxy.useDict(
  "bind_status",
  "sys_normal_disable",
  "stock_status"
);

const infoList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const factoryOptions = ref([]);
const modelOptions = ref([]);
const agentOptions = ref([]);
const typeOptions = ref([]);

const currentFormKey = ref("");
const currentFormRef = ref(null);
// const currentModal = ref("") // 插槽名
const btnOpen01 = ref(false);
const btnOpen02 = ref(false);

// 详情弹窗相关变量
const detailOpen = ref(false);
const detailInfo = ref({});
const paramsOpen = ref(false);
const agentList = ref([]);
function getListbb() {
  loading.value = true;
  listAgent({ hasPage: false }).then((response) => {
    agentList.value = response.rows;
    console.log(agentList.value);
  });
}
const factors = ref([
  {
    label: "请选择",
    value: "",
  },
]);

const handleRemove = (file) => {
  form02.value.file = null;
};
const handleRemove3 = (file) => {
  form03.value.file = null;
};
const handleRemove5 = (file) => {
  form05.value.file = null;
};
const handleRemove7 = (file) => {
  form07.value.file = null;
};
const handleRemove9 = (file) => {
  form09.value.file = null;
};

const handleChange = (file) => {
  if (
    file.raw.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    file.raw.type !== "application/vnd.ms-excel"
  ) {
    proxy.$modal.msgError("请上传xlsx格式的文件");
    return;
  } else {
    form02.value.file = file.raw;
  }
};

// 服务商发货 上传
const handleChange2 = (file) => {
  if (
    file.raw.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    file.raw.type !== "application/vnd.ms-excel"
  ) {
    proxy.$modal.msgError("请上传xlsx格式的文件");
    return;
  } else {
    form03.value.file = file.raw;
  }
};

// 服务商批量调拨 上传
const handleChange5 = (file) => {
  if (
    file.raw.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    file.raw.type !== "application/vnd.ms-excel"
  ) {
    proxy.$modal.msgError("请上传xlsx格式的文件");
    return;
  } else {
    form05.value.file = file.raw;
  }
};

// 设备回收
const handleChange7 = (file) => {
  if (
    file.raw.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    file.raw.type !== "application/vnd.ms-excel"
  ) {
    proxy.$modal.msgError("请上传xlsx格式的文件");
    return;
  } else {
    form07.value.file = file.raw;
  }
};

// 设备删除
const handleChange9 = (file) => {
  if (
    file.raw.type !==
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" &&
    file.raw.type !== "application/vnd.ms-excel"
  ) {
    proxy.$modal.msgError("请上传xlsx格式的文件");
    return;
  } else {
    form09.value.file = file.raw;
  }
};

// 服务商批量发货 上传

const downloadTemplate = () => {
  const url = import.meta.env.VITE_APP_BASE_APIL+'/files/snfile-template.xlsx';
  console.log(url);

  window.open(url, "_blank");
};

// 筛查
const onlyShowSn = ref(true);
const openSearch = () => {
  onlyShowSn.value = !onlyShowSn.value;
};

listModel().then((response) => {
  modelOptions.value = response.rows;
});
listFactory().then((response) => {
  factoryOptions.value = response.rows;
});
listAgent().then((response) => {
  agentOptions.value = response.rows;
});
listType().then((response) => {
  typeOptions.value = response.rows;
});

// 列显隐信息
const columns = ref([
  { key: 0, label: `SN号`, visible: true },
  { key: 1, label: `所属厂商`, visible: true },
  { key: 2, label: `所属型号`, visible: true },
  { key: 3, label: `所属服务商`, visible: true },
  { key: 4, label: `绑定状态`, visible: true },
  { key: 5, label: `终端状态`, visible: true },
  { key: 6, label: `库存状态`, visible: true },
  { key: 7, label: `绑定时间`, visible: true },
  { key: 8, label: `设备类型`, visible: true },
]);

const isDark = ref(true);
const intervalTime = ref([]);

const data = reactive({
  form: {},
  form02: {
    file: "",
  },
  form03: {},
  form04: {
    sns: "",
  },
  form05: {},
  form06: {},
  form07: {},
  form08: {},
  form09: {},
  form10: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    sn: null,
    // intervalTime: [],
    factoryId: null,
    typeId: null,
    agentName: null,
    isJunior: "1",
    modelId: null,
    bindStatus: null,
    mac: "",
    deviceStatus: null,
    onlineStatus: null,
  },
  rules: {
    mac: [{ required: true, message: "MAC号不能为空", trigger: "blur" }],
  },
  rules02: {
    file: [{ required: true, message: "请上传文件", trigger: "blur" }],
    factoryId: [
      { required: true, message: "所属厂商不能为空", trigger: "blur" },
    ],
    modelId: [{ required: true, message: "所属型号不能为空", trigger: "blur" }],
    typeId: [{ required: true, message: "机具类型不能为空", trigger: "blur" }],
  },
  rules03: {
    file: [{ required: true, message: "请上传文件", trigger: "blur" }],
  },
  rules04: {
    mac: [{ required: true, message: "SN号不能为空", trigger: "blur" }],
    agentIds: [{ required: true, message: "请选择服务商", trigger: "blur" }],
  },
  rules05: {
    file: [{ required: true, message: "请上传文件", trigger: "blur" }],
  },
  rules06: {
    file: [{ required: true, message: "请上传文件", trigger: "blur" }],
  },
});

const {
  queryParams,
  form,
  rules,
  rules02,
  form02,
  form03,
  form04,
  form05,
  form06,
  form07,
  form08,
  form09,
  form10,
  rules03,
  rules04,
  rules05,
  rules06,
} = toRefs(data);

// 数据检查
// function isSubmitDisabled(key) {
//   return Object.values(key.value).some(value => value === '');
// }
function handleClose() {
  form.value = {
    id: null,
    sn: null,
    factoryId: null,
    modelId: null,
    agentId: null,
    bindStatus: null,
    deviceStatus: null,
    stockStatus: null,
    bindTime: null,
    phone: null,
    address: null,
    backPicUrl: null,
    createBy: null,
    createTime: null,
  };
}

/** 查询设备信息列表 */
function getList() {
  loading.value = true;
  listInfo(proxy.addDateRange(queryParams.value, intervalTime.value)).then(
    (response) => {
      // 厂商、型号、服务商、绑定状态、终端状态、库存状态  转换为名称
      response.rows.forEach((item) => {
        item.factoryId = factoryOptions.value.find(
          (factory) => factory.id == item.factoryId
        )?.name;
        item.modelId = modelOptions.value.find(
          (model) => model.id == item.modelId
        )?.name;
        item.agentId = agentOptions.value.find(
          (agent) => agent.id == item.agentId
        )?.agentName;
        item.typeId = typeOptions.value.find(
          (type) => type.id == item.typeId
        )?.name;
      });
      infoList.value = response.rows;
      total.value = response.total;
      loading.value = false;
    }
  );
}

// 取消按钮
function cancel(ref) {
  open.value = false;
  resetForm(ref);
}

// 表单重置
function reset() {
  form.value = {
    id: null,
    sn: null,
    factoryId: null,
    modelId: null,
    agentId: null,
    bindStatus: null,
    deviceStatus: null,
    stockStatus: null,
    bindTime: null,
    phone: null,
    address: null,
    backPicUrl: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null,
  };
  proxy.resetForm("infoRef");
}

// 通用重置
const resetForm = (refName) => {
  if (proxy.$refs[refName]) {
    proxy.$refs[refName].resetFields();
  }
};

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  intervalTime.value = [];
  queryParams.value.agentName = null;
  queryParams.value.isJunior = "1";
  queryParams.value.sn = null;
  queryParams.value.mac = "";
  queryParams.value.factoryId = null;
  queryParams.value.typeId = null;
  queryParams.value.modelId = null;
  queryParams.value.bindStatus = null;
  queryParams.value.deviceStatus = null;
  queryParams.value.onlineStatus = null;
  handleQuery();
}
const idss = ref([]);
const idsss = ref([]);
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.sn);

  idss.value = selection.map((item) => item.id);
  idsss.value = selection.map((item) => item.mac);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

function getSelectionRows() {
  return infoList.value.filter((item) => ids.value.includes(item.sn));
}

// 服务商发货(多选)
function agentServer(key) {
  if (idsss.value.length === 0) {
    proxy.$modal.msgError("请选择一条设备");
    return;
  } else {
    if (key === "form04") {
      openDialog("form04", "服务商发货(多选)", "infoRef04");
      form04.value.mac = idsss.value.join(",");
    } else if (key === "form06") {
      form06.value.mac = idsss.value.join(",");
      openDialog("form06", "服务商批量调拨(多选)", "infoRef06");
    } else if (key === "form08") {
      form08.value.mac = idsss.value.join(",");
      openDialog("form08", "服务商批量回收(多选)", "infoRef08");
    } else if (key === "form10") {
      form10.value.mac = idsss.value.join(",");
      openDialog("form10", "服务商批量解绑(多选)", "infoRef10");
    }
  }
}

watch(ids, (newVal) => {
  if (newVal.length > 0) {
    form04.sns = newVal.join(",");
    console.log(newVal, form04, "newVal======");
  }
});

// 处理业务
const openDialog = (key, name, ref) => {
  currentFormKey.value = key;
  currentFormRef.value = ref;
  title.value = name;
  open.value = true;
};

/** 新增按钮操作 */
function handleAdd() {
  reset();
  btnOpen01.value = true;
  title.value = "添加设备信息";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  openDialog("form", "编辑");
  const _id = row.id || ids.value;
  getInfo(_id).then((response) => {
    console.log(response.data, typeOptions.value);
    response.data.factoryId = response.data.factoryId + "";
    response.data.modelId = response.data.modelId + "";
    response.data.agentId = response.data.agentId + "";
    // response.data.typeId = typeOptions.value.find(
    //   (type) => type.id == form.value.typeId
    // )?.id;
    response.data.typeId = response.data.typeId + "";
    console.log("response.data", response.data);

    form.value = response.data;
    open.value = true;
    title.value = "修改设备信息";
  });
}

/** 详情按钮操作 */
function handleDetail(row) {
  const _id = row.id || row.mac;
  if (!_id) {
    proxy.$modal.msgError("无法获取设备ID");
    return;
  }

  loading.value = true;
  getInfo(_id)
    .then((response) => {
      detailInfo.value = response.data || {};
      detailOpen.value = true;
      loading.value = false;
    })
    .catch((error) => {
      console.error("获取设备详情失败:", error);
      proxy.$modal.msgError("获取设备详情失败");
      loading.value = false;
    });
}

/** 提交按钮 */
function submitForm(key) {
  switch (key) {
    case "form":
      proxy.$refs["infoRef"].validate((valid) => {
        if (valid) {
          console.log(form.value);
          let params = { mac: form.value.mac };
          params.id = form.value.id;
          params.factoryId = form.value.factoryId;
          params.modelId = form.value.modelId;
          params.typeId = form.value.typeId;

          if (form.value.id != null) {
            updateInfo(params).then((response) => {
              proxy.$modal.msgSuccess("修改成功");
              open.value = false;
              getList();
            });
          } else {
            addInfo(params).then((response) => {
              proxy.$modal.msgSuccess("新增成功");
              open.value = false;
              getList();
            });
          }
        }
      });
      break;
    case "form02":
      proxy.$refs["infoRef02"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("file", form02.value.file); // 文件参数
          formData.append("factoryId", form02.value.factoryId); // 替换为实际值
          formData.append("modelId", form02.value.modelId); // 替换为实际值
          formData.append("typeId", form02.value.typeId); // 替换为实际
          batchAdd(formData).then((response) => {
            proxy.$modal.msgSuccess("批量新增成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form03":
      proxy.$refs["infoRef03"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("file", form03.value.file); // 文件参数
          formData.append("agentId", form03.value.agentId);
          batchDeliver(formData).then((response) => {
            proxy.$modal.msgSuccess("服务商发货成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form04":
      proxy.$refs["infoRef04"].validate((valid) => {
        if (valid) {
          batchDeliverys(form04.value).then((response) => {
            proxy.$modal.msgSuccess("服务商发货成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form05":
      proxy.$refs["infoRef05"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("file", form05.value.file); // 文件参数
          formData.append("srcAgentId", form05.value.srcAgentId);
          formData.append("desAgentId", form05.value.desAgentId);
          allotAgent(formData).then((response) => {
            proxy.$modal.msgSuccess("服务商调拨成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form06":
      proxy.$refs["infoRef06"].validate((valid) => {
        if (valid) {
          batchAllotAgent(form06.value).then((response) => {
            proxy.$modal.msgSuccess("服务商调拨(多选)成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form07":
      proxy.$refs["infoRef07"].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          formData.append("file", form07.value.file); // 文件参数
          recover(formData).then((response) => {
            proxy.$modal.msgSuccess("设备回收成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form08":
      proxy.$refs["infoRef08"].validate((valid) => {
        if (valid) {
          batchRecover(form08.value).then((response) => {
            proxy.$modal.msgSuccess("设备回收(多选)成功");
            getList();
          });
        }
      });
      break;
    case "form09":
      proxy.$refs["infoRef09"].validate((valid) => {
        if (valid) {
          delInfo(form09.value).then((response) => {
            proxy.$modal.msgSuccess("设备回收(多选)成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    case "form10":
      proxy.$refs["infoRef10"].validate((valid) => {
        if (valid) {
          delInfo(form10.value.sns).then((response) => {
            proxy.$modal.msgSuccess("设备回收(多选)成功");
            open.value = false;
            getList();
          });
        }
      });
      break;
    default:
  }
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _ids = row.mac || idsss.value;
  const ids = row.id || idss.value;
  proxy.$modal
    .confirm('是否确认删除设备信息编号为"' + _ids + '"的数据项？')
    .then(function () {
      return delInfo(ids);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  // exportInfo(queryParams.value).then((response) => {
  //   proxy.download(response);
  // });
  proxy.download(
    "/pcdn/info/export",
    {
      ...queryParams.value,
    },
    `info_${new Date().getTime()}.xlsx`
  );
}

/** 终端入库 */
function submitBatch() {
  proxy.$refs["infoRef"].validate((valid) => {
    if (valid) {
      addInfo(form.value).then((response) => {
        proxy.$modal.msgSuccess("入库成功");
        btnOpen01.value = false;
        getList();
      });
    }
  });
}

/** 批量入库 */
function addBatch() {
  reset();
  btnOpen02.value = true;
  title.value = "批量入库";
}

/** 获取厂商名称 */
function getFactoryName(factoryId) {
  if (!factoryId) return "-";
  console.log(factoryOptions);
  const factory = factoryOptions.value.find((item) => item.id == factoryId);
  return factory ? factory.name : "-";
}

/** 获取型号名称 */
function getModelName(modelId) {
  if (!modelId) return "-";
  const model = modelOptions.value.find((item) => item.id == modelId);
  return model ? model.name : "-";
}

/** 获取类型名称 */
function getTypeName(typeId) {
  if (!typeId) return "-";
  const type = typeOptions.value.find((item) => item.id == typeId);
  return type ? type.name : "-";
}

/** 显示参数详情 */
function showParamsDetail() {
  paramsOpen.value = true;
}

/** 获取第一张图片URL */
function getFirstImageUrl(imageUrls) {
  if (!imageUrls) return "";
  const urls = imageUrls.split(",").filter((url) => url.trim());
  return urls.length > 0 ? urls[0] : "";
}

/** 获取所有图片URL数组 */
function getImageUrls(imageUrls) {
  if (!imageUrls) return [];
  return imageUrls.split(",").filter((url) => url.trim());
}

/** 获取拨号方式文本 */
function getDialingMethodText(dialingMethod) {
  if (dialingMethod === 1) return "固定公网单IP";
  if (dialingMethod === 2) return "固定公网多IP";
  if (dialingMethod === 3) return "服务器拨号";
  if (dialingMethod === 4) return "DHCP单IP";
  if (dialingMethod === 5) return "DHCP多IP";
  if (dialingMethod === 6) return "软路由";
  if (dialingMethod === 7) return "静态IP";
  if (dialingMethod === 8) return "DHCP";
  return "未知";
}

/** 获取拨号方式标签类型 */
function getDialingMethodType(dialingMethod) {
  if (dialingMethod === 1) return "success";
  if (dialingMethod === 2) return "primary";
  if (dialingMethod === 3) return "warning";
  return "info";
}

/** 获取运营商文本 */
function getOperatorText(operator) {
  if (operator === 1) return "中国移动";
  if (operator === 2) return "中国联通";
  if (operator === 3) return "中国电信";
  return "未知";
}

/** 获取运营商标签类型 */
function getOperatorType(operator) {
  if (operator === 1) return "success";
  if (operator === 2) return "primary";
  if (operator === 3) return "warning";
  if (operator === 4) return "info";
  if (operator === 5) return "danger";
  return "info";
}

getList();
</script>
<style>
.el-message-box__message {
  min-width: 0;
}
</style>